<template>
  <div class="information-panel">
    <h2 class="title" :class="!showInformation ? 'hide' : ''" @click="changeShow">
      <span>{{$t('webchat.conversationInfo')}}</span>
      <i class="icon el-icon-arrow-down" v-show="!showInformation"></i>
      <i class="icon el-icon-arrow-up" v-show="showInformation"></i>
    </h2>
    <div class="information" v-show="showInformation">
      <el-popover ref="guijiPopover" placement="top" popper-class="guijiHistoryClass" trigger="click" v-show="redirectHistory.length > 0">
        <div class="guijiHistory">
          <div v-for="item in redirectHistory">
            <p class="time font12">{{item.time}}</p>
            <p class="desc font12">{{item.description}}</p>
          </div>
        </div>
      </el-popover>
      <div class="item clearfix">
        <div class="label">{{$t('webchat.webchatSessionId')}}</div>
        <div class="value">{{chatInfo._id}}<span @click="copyId()" class="iconfont icon-fuzhi"></span></div>
      </div>
      <div class="item clearfix">
        <div class="label">{{$t('webchat.fromSkillGroup')}}</div>
        <div class="value">{{chatInfo.queueName ? chatInfo.queueName : $t('webchat.nothing')}}</div>
      </div>
      <div class="item clearfix">
        <div class="label">{{$t('webchat.converNum')}}</div>
        <div  v-html="chatInfo.dialogueTimes !== undefined ? chatInfo.dialogueTimes : $t('webchat.nothing')" class="value"></div>
      </div>
      <div class="item clearfix" v-if="flag !=='ecommerce'">
        <div class="label">{{$t('webchat.invitationNum')}}</div>
        <div class="value" v-html="chatInfo.inviteTimes !== undefined ? chatInfo.inviteTimes : $t('webchat.nothing')"></div>
      </div>
      <!-- <div class="item clearfix">
        <div class="label">{{$t('webchat.assistAgent')}}</div>
        <div class="value" v-html="webchatData.assistAgent ? webchatData.invitedUserName : $t('webchat.nothing')"></div>
      </div> -->
      <div class="item clearfix">
        <div class="label">{{$t('webchat.assistAgent')}}</div>
        <div class="value" v-html="invitedUserName"></div>
      </div>
      <div class="item clearfix" v-if="flag !=='ecommerce'">
        <div class="label">{{$t('webchat.invitationStatus')}}</div>
        <div class="value" v-html="inviteUserStatus"></div>
      </div>
      <!-- <div class="item clearfix" v-if="flag !=='ecommerce'">
        <div class="label">{{$t('webchat.invitationStatus')}}</div>
        <div class="value" v-html="!webchatData.inviteUserStatus ? $t('webchat.noInvite') : webchatData.inviteUserStatus === 'accept' ? $t('webchat.accecptInvite') : $t('webchat.noAccecptInvite')"></div>
      </div> -->
      <div class="item clearfix" v-if="flag !=='ecommerce'">
        <div class="label">{{$t('call.transferContrail')}}</div>
        <div class="value">
          <i class="iconfont icon-liulanguiji1" v-popover:guijiPopover v-show="redirectHistory.length > 0"
             :class="redirectHistory.length > 0 ? 'guijiHighLight' : ''"
          ></i>
          <i class="iconfont icon-liulanguiji1" v-show="redirectHistory.length === 0"
          ></i>
        </div>
      </div>
      <div v-if="tabType === 'webchat_todo'">
        <div class="item clearfix">
          <div class="label">{{$t('webchat.artificialStartTime')}}</div>
          <div class="value">{{formatTime(webchatData.manualTime)}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.agentTakeTime')}}</div>
          <div class="value">{{formatTime(webchatData.beginTime)}}</div>
        </div>
      </div>
      <!-- 在待处理中不展示，只在全部中展示 -->
      <div v-if="tabType === 'webchat_all' ||tabType === 'webchat_laterProcess'">
        <div class="item clearfix">
          <div class="label">{{$t('webchat.msgNum')}}</div>
          <div class="value">{{chatInfo.totalMsgCount}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.endType')}}</div>
          <div class="value">{{chatInfo.finishReason}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.evalution')}}</div>
          <div class="value">
            <span v-if="CSRShowToAgent === 'part' && !satisfactioEvaluation">{{$t('webchat.userEvaluated')}}</span>
          <span class="investigate_box" v-if="CSRShowToAgent === 'all' || satisfactioEvaluation">
            <span class="chat_info_li_con" v-if="chatInfo.investigate && chatInfo.investigate.value" :title="chatInfo.investigate.value" @mouseenter="investigateShow(true)">{{chatInfo.investigate.value}}</span>
          </span>
            <ul v-if="investigate" class="investigate_con clearBoth" @mouseleave="investigateShow()" @mouseenter="investigateShow(true)">
              <li class="clearBoth">
                <i>{{$t('webchat.evalution')}}：</i>
                <span>{{chatInfo.investigate.value}}</span>
              </li>
              <li class="clearBoth">
                <i>{{$t('webchat.evalutionLabel')}}：</i>
                <span v-if="chatInfo.investigate.label && chatInfo.investigate.label.length > 0">{{chatInfo.investigate.label}}</span>
              </li>
              <li class="clearBoth">
                <i>{{$t('webchat.evalutionContent')}}：</i>
                <span class="investigate_content">{{chatInfo.investigate.content}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.fromService')}}</div>
          <div class="value">{{agentName}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('public.createTime')}}</div>
          <div class="value">{{chatInfo.createTime}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.artificialStartTime')}}</div>
          <div class="value">{{manualTime}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.agentTakeTime')}}</div>
          <div class="value">{{formatTime(chatInfo.beginTime)}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.firstResponseDate')}}</div>
          <div class="value">{{formatTime(chatInfo.firstReplyTime)}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.firstReplyDuration')}}</div>
          <div class="value">{{firstReplyduration}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">{{$t('webchat.conversationEdnTime')}}</div>
          <div class="value">{{chatInfo.endTime}}</div>
        </div>
        <div class="item clearfix">
          <div class="label">
            {{$t('webchat.dialogueDuration')}}
            <el-tooltip effect="dark" :content="$t('webchat.dialogueDurationTip')" placement="right">
              <span class="iconfont icon-tixingweizhi"></span>
            </el-tooltip>
          </div>
          <div class="value">{{duration}}</div>
        </div>
      </div>
      <div class="item clearfix">
        <div class="label">{{$t('webchat.custQueueTime')}}</div>
        <div class="value">{{custQueueTime}}</div>
      </div>
      <div class="item clearfix">
        <div class="label">{{$t('webchat.serviceToManualType')}}</div>
        <div class="value">{{bot2humanReason}}</div>
      </div>
      <div class="item clearfix" v-if="tabType === 'webchat_all' ||tabType === 'webchat_laterProcess'">
        <div class="label" style="width:106px">
          {{$t('webchat.agentChatTime')}}
          <el-tooltip  effect="dark" :content="$t('webchat.agentChatTimeTip')" placement="right">
            <span class="iconfont icon-tixingweizhi"></span>
          </el-tooltip>
        </div>
        <div class="value">{{manualSessionDuration}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getFormatDateTime, getCacheByKey } from '@/utils/m7Utils'
  import { millsToDate, getCache, contains } from '@utils/m7Utils'
  import Clipboard from 'clipboard-js'
  export default {
    name: 'conversation-info',
    data () {
      return {
        showInformation: false,
        showGuijiPopover: false,
        investigate: false,
        CSRShowToAgent: 'all',
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        bot2humanReasonData: [{label: this.$t('webchat.serviceToManualType1'), value: 0},{label: this.$t('webchat.serviceToManualType2'), value: 1},{label: this.$t('webchat.serviceToManualType3'), value: 2},{label: this.$t('webchat.serviceToManualType4'), value: 3},{label: this.$t('webchat.serviceToManualType5'), value: 4},{label: this.$t('webchat.serviceToManualType6'), value: 5},{label: this.$t('webchat.serviceToManualType7'), value: 6},{label: this.$t('webchat.serviceToManualType8'), value: 7},{label: this.$t('webchat.serviceToManualType9'), value: 8},{label: this.$t('webchat.serviceToManualType10'), value: 9},{label: this.$t('webchat.serviceToManualType11'), value: 10},{label: this.$t('webchat.serviceToManualType12'), value: 11},{label: this.$t('webchat.serviceToManualType13'), value: 12},{label: this.$t('webchat.serviceToManualType14'), value: 13},{label: this.$t('webchat.serviceToManualType15'), value: 14}],
      }
    },
    props: {
      chatInformationId: String,
      webchatData: Object,
      chatInfo: Object
    },
    computed: {
      redirectHistory () {
        let list = []
        if (this.webchatData.history && this.webchatData.history.length > 0) {
          list = this.webchatData.history.filter(item => {
            return item.type === 'redirect' || item.type === 'changePeer'
          })
          list.forEach((item) => {
            if (item.type === 'redirect') {
              let agent = this.$store.getters.agents[item.user]
              item.userName = agent ? agent.displayName : ''
              let toAgent = this.$store.getters.agents[item.toUser]
              item.toUserName = toAgent ? toAgent.displayName : ''
              item.description = this.$t('webchat.redirectHistoryToUser', {userName: item.userName, toUserName: item.toUserName})
            } else if (item.type === 'changePeer') {
              if (getCacheByKey('mailQueues', 'Exten', item.toPeer) != null) { // 技能组
                item.toPeerName = getCacheByKey('mailQueues', 'Exten', item.toPeer).DisplayName
                let agent = this.$store.getters.agents[item.user]
                item.userName = agent ? agent.displayName : ''
                item.description = this.$t('webchat.redirectHistoryToPeer', {userName: item.userName, toPeerName: item.toPeerName})
              }
            }
          })
          return list
        } else {
          return []
        }
      },
      satisfactioEvaluation () {
        return this.$store.state.session.user.funcIds && contains(this.$store.state.session.user.funcIds, 'func_satisfactio_evaluation')
      },
      tabType () {
        return this.$route.path.split('/')[3]
      },
      agentName () {
        let data = ''
        if (this.chatInfo && this.chatInfo.user && this.$store.getters.agents) {
          data = this.$store.getters.agents[this.chatInfo.user].displayName
        }
        return data
      },
      beginDate () {
        let data = ''
        if (this.chatInfo && this.chatInfo.beginTime) {
          let tempD = new Date(this.chatInfo.beginTime)
          data = tempD.getFullYear() + '-' + (tempD.getMonth() + 1) + '-' + tempD.getDate()
        }
        return data
      },
      firstReplyduration () {
        let data = ''
        if (this.chatInfo && this.chatInfo.beginTime && this.chatInfo.firstReplyTime) {
          data = millsToDate(Date.parse(new Date(this.chatInfo.firstReplyTime)) - Date.parse(new Date(this.chatInfo.beginTime)))
        }
        return data
      },
      duration () {
        let data = ''
        if (this.chatInfo && this.chatInfo.lastTimeStamp && this.chatInfo.manualTime) {
          data = millsToDate(this.chatInfo.lastTimeStamp - this.chatInfo.manualTime)
        }
        return data
      },
      custQueueTime () {
        let data = ''
        let beginTime = Date.parse(new Date(this.webchatData.beginTime))
        let manualTime = Date.parse(new Date(this.webchatData.manualTime))
        if (this.webchatData.beginTime && this.webchatData.manualTime && (beginTime - manualTime >= 0)) {
          data = millsToDate(beginTime - manualTime)
        }
        return data
      },
      manualSessionDuration () {
        let data = ''
        let beginTime = Date.parse(new Date(this.webchatData.beginTime))
        let endTime = Date.parse(new Date(this.webchatData.endTime))
        if (this.webchatData.beginTime && this.webchatData.endTime && (endTime - beginTime >= 0)) {
          data = millsToDate(endTime - beginTime)
        }
        return data
      },
      manualTime () {
        let data = ''
        if (this.chatInfo.manualTime) {
          data = getFormatDateTime(new Date(this.chatInfo.manualTime))
        }
        return data
      },
      bot2humanReason () {
        let data = ''
        if (this.chatInfo.bot2humanReason) {
          this.bot2humanReasonData.forEach(item=>{
            if(item.value == this.chatInfo.bot2humanReason){
              data = item.label
            }
          })
        }
        return data
      },
      invitedUserName () {
        let webchatStatus = this.webchatData.status;
        let returnText = ''
        if (webchatStatus === 'finish') {
          let history = this.webchatData.history;
          if (history && history.length > 0) {
            let userList = []
            history.forEach((item)=>{
              if (item.type === 'invite' && item.deal === 'accept') {
                userList.push(item.invitedUser);
              }
            })
            if (userList && userList.length > 0) {
              userList.forEach((id) => {
                if (returnText) {
                  returnText=returnText + '，' + this.$store.getters.agents[id].displayName
                } else {
                  returnText= this.$store.getters.agents[id].displayName
                }
              })
            } else {
              returnText = this.$t('webchat.nothing');
            }
          } else {
            returnText = this.$t('webchat.nothing');
          }
        } else {
          returnText = this.webchatData.assistAgent ? this.webchatData.invitedUserName : this.$t('webchat.nothing')
        }
        return returnText
      },
      inviteUserStatus () {
        let webchatStatus = this.webchatData.status;
        let returnText = ''
        if (webchatStatus === 'finish') {
          let history = this.webchatData.history;
          if (history && history.length > 0) {
            let userList = []
            history.forEach((item)=>{
              if (item.type === 'invite' && item.deal === 'accept') {
                userList.push(item.invitedUser);
              }
            })
            if (userList && userList.length > 0) {
              returnText = this.$t('webchat.accecptInvite')
            } else {
              returnText = this.$t('webchat.noInvite')
            }
          } else {
            returnText = this.$t('webchat.noInvite');
          }
        } else {
          returnText = !this.webchatData.inviteUserStatus ? this.$t('webchat.noInvite') : this.webchatData.inviteUserStatus === 'accept' ? this.$t('webchat.accecptInvite') : this.$t('webchat.noAccecptInvite')
        }
        return returnText;
      }
    },
    methods: {
      formatTime (time) {
        if (time) {
          return getFormatDateTime(new Date(time))
        }
        return ''
      },
      changeShow () {
        this.showInformation = !this.showInformation
        if (this.showInformation) {
          window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-对话信息'])
        }
      },
      // 复制剪切板的操作
      copyId () {
        let self = this
        let copytext = ''
        copytext = this.chatInfo._id
        Clipboard.copy(copytext).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      investigateShow (flag) {
        if (flag) {
          this.investigate = true
        } else {
          this.investigate = false
        }
      }
    },
    mounted () {
      this.CSRShowToAgent = getCache('CSRShowToAgent') || 'all'
    }
  }
</script>

<style lang="stylus" scoped>
  @import "./../../../../../assets/common.styl"
  .information-panel
    padding-top 20px
    padding-left 20px
    padding-right 20px
    .title
      font-size 14px
      font-weight 600
      color $cf-gray3
      cursor pointer
      .icon
        margin-left 5px
        font-size 11px
        color $cf-level4
    .hide
      padding-bottom 20px
      border-bottom solid 1px #d9d9d9

  .information
    padding-top 8px
    padding-bottom: 20px;
    border-bottom: solid 1px #d9d9d9;
    .guijiHistory
      font-size 12px
      padding 20px
      .item
        color $c-log
      .desc
        color $cf-gray0
        margin-bottom 10px
    .guijiHighLight
      color $c-main
      cursor pointer
    .item
      position relative
      min-height 24px
      line-height 24px
      &.clearfix:after
        display block
      .label
        width 90px
        float left
        color $cf-gray3
      .value
        color $cf-gray0
        word-wrap break-word
        word-break normal
        a
          color $c-main
  .investigate_con
    position absolute
    bottom 0
    width 100%
    left 0
    background $cf-white
    box-shadow 0 0 8px #aaa
    padding 8px
    box-sizing border-box
    i
      font-style normal
    span
      /*float none*/
      clear both
      vertical-align bottom
    li
      margin-bottom 6px
    .investigate_content
      float none
      display inline
      word-break break-all
      white-space normal
      span
        color $cf-level2
  .investigate_box
    span
      color $c-main
  .icon-fuzhi
    color $c-main
    cursor pointer
    font-size 12px
    margin-left 10px
  .icon-tixingweizhi
    border 1px solid $c-main
    border-radius 50%
    color $c-main
    display inline-block
    height 16px
    width 16px
    text-align center
    line-height 16px
    font-size 12px
    cursor pointer
    transform scale(0.8)
</style>
